<template>
  <view class="realName" @click="navTab">
    <view class="header">
      <view class="name">{{ extension.Title }}</view>
      <view class="time">{{ time | timeMD }}</view>
    </view>
    <view class="content">
      <view class="Content">
        {{ extension.Content }}
      </view>
      <view class="kong"> </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    extension: {},
    time: 0,
  },
  created() {},
  filters: {
    timeMD(val) {
      let date = new Date(parseInt(val) * 1000);
      let Hour = date.getHours();
      let Minute = date.getMinutes();
      return `${Hour < 10 ? "0" + Hour : Hour}:${
        Minute < 10 ? "0" + Minute : Minute
      }`;
    },
  },
  methods: {
    navTab() {
      if (this.extension.Page ? this.extension.Page.AppPagePath : false) {
        uni.navigateTo({
          url: this.extension.Page.AppPagePath,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.realName {
  display: flex;
  flex-direction: column;
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 28rpx 34rpx;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .name {
      font-size: 30rpx;
      color: #030303;
      font-weight: 800;
      font-family: PingFang SC-Bold;
    }

    .time {
      color: #999999;
      font-size: 26rpx;
      font-family: PingFang SC-Bold;
    }
  }

  .content {
    margin-top: 16rpx;
    display: flex;
    justify-content: space-between;
    flex-direction: row;

    .Content {
      font-size: 28rpx;
      color: #030303;
      white-space: pre-wrap;
      flex: 1;
    }

    .kong {
      width: 60rpx;
    }
  }
}
</style>